<template>
	<view class="">
		<f-navbar bgColor="#369afd">
			<view slot="default">
				<view style="display: flex;align-items: center;justify-content: center;">
					<image :src="avatar" mode="" style="width: 52rpx;height: 52rpx;border-radius: 50%;"></image>
					<text style="color: #fff;margin-left: 10rpx;">{{name}}</text>
				</view>
			</view>
		</f-navbar>
		<view style="background: url(https://cdn.yowswl.com/image/admin/2024/02/26/4fc307eb6db741e2b0d7fede546e6a3cnf671q3bgw.png) no-repeat;height:400rpx;padding: 20rpx;" :style="{backgroundSize:`100% 100%`}">
			<view style="background-color: #fff;padding:20rpx;border-radius: 20rpx;margin-top: 20rpx;">
				<view style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 30rpx;">
					<image src="https://cdn.yowswl.com/image/admin/2024/02/29/487a9cdf2a1a461f82fbe01a4aa5695d8sf6qu8so6.png" mode="" style="width: 172rpx;height: 32rpx;"></image>
				</view>
				<circleTab :tabList='list' @getId='getId' :index='1'></circleTab>
				<view style="display: flex;align-items: center;flex-wrap:wrap;width: 100%;">
					<view v-for="(item,index) in overList" :key="index" style="text-align: center;width:33%;margin-top: 40rpx;">
						<view style="color:#333;font-weight: 650;">{{item.price}}</view>
						<view style="color: #999;font-size: 22rpx;margin-top: 10rpx;">{{item.title}}</view>
					</view>
				</view>
			</view>
			<view style="background-color: #fff;padding:20rpx 20rpx 0 20rpx;border-radius: 20rpx;margin-top: 20rpx;">
				<view style="margin-bottom: 20rpx;">
					 <u-tabs :list="navList" @click="getNavId" lineColor='#FF3F3F'></u-tabs>
				</view>
				<view v-if="isEc">
					 <EcCanvas ref="myEc" :sale='sale' :wait='dataList[sid].wait' :time='times' :settle="dataList[sid].settle" :total="dataList[sid].total" :isMule="true" :totalN="`总额: ${total}`" :settleN="`退款: ${settle}`" :waitN="`销售: ${wait}`"></EcCanvas>
				</view>
			</view>
			<view style="text-align: center;margin: 40rpx 0;">
				<image src="https://cdn.yowswl.com/image/admin/2024/02/29/ff40626d062b438ab7492ece3c4f9b89znufapjps2.png" mode="" style="width: 256rpx;height: 32rpx;display: inline-block;"></image>
			</view>
			<view style="padding-bottom: 40rpx;">
				<view v-for="(item,index) in shopList" :key="index" style="display: flex;background-color: #fff;padding: 20rpx;border-radius: 20rpx;margin-bottom: 20rpx;" @click="goNav(`/pages/sub/BDShop?id=${item.productId}&uid=${id}&avatar=${avatar}&name=${name}`)">
					<image :src="item.cover" mode="" style="width: 136rpx;height: 136rpx;border-radius: 20rpx;"></image>
					<view style="margin-left: 20rpx;width: 76%;">
						<view style="font-size: 24rpx;color: #333;">{{item.title}}</view>
						<view style="display:flex;align-items: center;justify-content:space-between;margin-top: 20rpx;">
							<view style="color: #ff0e29; font-weight: 600;">¥ {{item.price}}</view>
							<view style="font-size: 22rpx;color: #999;">本月已售: {{item.orderNum}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStatisDetSub,
		getStatisDet
	} from "@/api/statistics.js"
	import {
		getBdProductList
	} from "@/api/shopAuth.js"
	import {
		goNav
	} from '@/lib/Comment.js'
	import circleTab from "@/components/circle-tabs/circle-tabs.vue"
	import EcCanvas from '@/components/lineEcharts.vue'
	export default{
		components:{
			circleTab,
			EcCanvas
		},
		data(){
			return{
				id:'',
				avatar:'',
				name:'',
				list:[
					{
						id:1,
						title:'今日'
					},{
						id:2,
						title:'近7天'
					},{
						id:3,
						title:'近30天'
					},{
						id:4,
						title:'本周'
					},{
						id:5,
						title:'本月'
					}
				],
				overList:[
					{
						title:'总订单数',
						price:'138',
					},{
						title:'退款单数',
						price:'138',
					},{
						title:'销售单数',
						price:'138',
					},{
						title:'总金额',
						price:'25.76',
					},{
						title:'退款金额',
						price:'3576.8',
					},{
						title:'销售金额',
						price:'24.52',
					}
				],
				navList:[
					{
						id:0,
						name:'销售额'
					},{
						id:1,
						name:'订单数'
					}
				],
				isEc:true,
				dateType:1,
				dataList:[
					{
						wait:[],
						settle:[],
						total:[]
					},
				],
				sid:0,
				wait:0,
				settle:0,
				total:0,
				sale:{
					min:0,
					max:''
				},
				params:{
					page:1,
					limit:20,
					dataType:1,
					productId:'',
					uid:''
				},
				shopList:[],
				pages:{
					page:1,
					limit:20,
					uid:'',
					load:true
				}
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
			console.log('111',this.scrollTop);
			if(this.scrollTop>400){
				this.isEc=false
			}else{
				this.isEc=true
			}
		},
		onLoad(option) {
			if(option.avatar){
				this.avatar = option.avatar
			}
			if(option.name){
				this.name = option.name
			}
			
			if(option.id){
				this.id = option.id
				this.pages.uid = option.id
				getStatisDetSub({dateType:this.dateType,uid:this.id,}).then(res=>{
					console.log('11',res);
					if(res.code==200){
						this.overList[0].price = res.data.totalNum
						this.overList[1].price = res.data.refundNum
						this.overList[2].price = res.data.num
						this.overList[3].price = res.data.totalPrice
						this.overList[4].price = res.data.refundPrice
						this.overList[5].price = res.data.price
					}
				})
				this.getStatis()
				this.resetList()
			}
		},
		methods:{
			goNav(url){
				goNav(url)
			},
			resetList() {
				this.pages.page = 1
				this.shopList = []
				this.getList()
			},
			getList() {
				if (!this.pages.load) {
					return;
				}
				this.pages.load = false;
				console.log('列表，参数', this.pages);
				getBdProductList(this.pages).then(res => {
					console.log('111',res);
					this.pages.page++
					this.shopList = this.shopList.concat(res.data.list)
					this.pages.load = true
				})
			
			},
			getId(e){
				 console.log('111',e);
				 this.dateType = e
				 this.params.dataType = e
				 this.getStatis()
				 getStatisDetSub({dateType:this.dateType,uid:this.id}).then(res=>{
				 	console.log('11',res);
				 	if(res.code==200){
				 		this.overList[0].price = res.data.totalNum
				 		this.overList[1].price = res.data.refundNum
				 		this.overList[2].price = res.data.num
				 		this.overList[3].price = res.data.totalPrice
				 		this.overList[4].price = res.data.refundPrice
				 		this.overList[5].price = res.data.price
				 	}
				 })
			 },
			 getStatis(){
			 	getStatisDet({dateType:this.dateType,uid:this.id}).then(res=>{
			 		console.log('折线',res);
			 		this.times = res.data.times
			 		this.sale = res.data.sale
			 		this.dataList = res.data.dataList
			 		res.data.dataList[this.sid].wait.forEach(e=>{
			 			let s = Number(e)
			 			this.wait += s
			 		})
			 		res.data.dataList[this.sid].total.forEach(e=>{
			 			let s = Number(e)
			 			this.total += s
			 		})
			 		res.data.dataList[this.sid].settle.forEach(e=>{
			 			let s = Number(e)
			 			this.settle += s
			 		})
			 	})
			 },
			 getNavId(e){
			 		console.log('11',e);
			 		this.sid = e.id
			 		this.title = e.name
			 		let nameObj={
			 			waitN:`销售: ${this.wait}`,
			 			settleN:`退款: ${this.settle}`,
			 			totalN:`总额: ${this.total}`
			 		}
			 		let actuObj={
			 			wait:this.dataList[e.id].wait,
			 			settle:this.dataList[e.id].settle,
			 			total:this.dataList[e.id].total
			 		}
			 		this.$refs.myEc.getdetData(nameObj,actuObj);
			 		console.log('11',e);
			}
		}
	}
</script>

<style>
	page{
		background-color: #f5f5f5;
		height: 100%;
	}
</style>